import React from 'react'
import './App.css'
import './assects/css/style.css'
import NewsCom from '../src/assects/js/newsCom'
import SearchCom from '../src/assects/js/searchCom'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      navList: ['xiaoxiong', 'xiaotuzi', 'daxingxing', 'xiaokonglong'],
      tabIndex: 0,
      navStyle: { left: '25px' },
      contentStyle: { transform: "translateX(0)"}
    }
  }
  render () {
    return (
      <div className="App">
        <div className="nav">
          {
            this.state.navList.map((item, index) => {
              return <div className={ 'navbox ' + (this.state.tabIndex === index ? 'active' : '') }
                key={ index } onClick={(e) => this.tabClickEvent(index)}>
                { item }
              </div>
            })
          }
          <div className="bar" style={this.state.navStyle}></div>
        </div>
        <div className="content" style={this.state.contentStyle}>
          <NewsCom></NewsCom>
          <SearchCom></SearchCom>
        </div>
        <img alt="asd" src="./logo.svg" />
      </div>
    )
  }
  tabClickEvent = (index) => {
    console.log(index)
    this.setState({
      tabIndex: index,
      navStyle: { left: index * 100 + 25 + 'px'},
      contentStyle: { transform: `translateX(${-index * 375}px)` }
    })
  }
}

export default App
